import React from 'react';
import { Text, View } from '@ray-js/ray'; // 导入基础 UI 组件
import styles from './index.module.less'; // 引入模块化样式
import { useActions, useProps } from '@ray-js/panel-sdk';

export function BottomTureDialog({onClick}:{onClick:()=>void}) {
    const temp_unit_convert = useProps(props => props.temp_unit_convert);//当前温标
  console.log('当前温标', temp_unit_convert);
    const actions = useActions();

  return (
    <View className={styles.overlayout} onClick={() => { onClick() }}>
      <View className={styles.view}>
        <View className={styles.background} >
          <Text style={{ fontSize: '20px', color: 'white', width: '100%', height: '100%', textAlign: 'center', display: 'flex', justifyContent: 'center', alignItems: 'center' }}  >温标</Text>
        </View>
        <View hoverClassName={styles.pressed} onClick={() => { onClick();
            actions.temp_unit_convert.set('c');
         }}
          hoverStayTime={5}> <Text className={styles.text} style={{ color: temp_unit_convert ==='c' ? 'red' : 'white' }} >℃</Text></View>
        <View style={{ width: '100%', height: '2rpx', backgroundColor: 'white' }}></View>
        <View hoverClassName={styles.pressed} onClick={() => { onClick();
             actions.temp_unit_convert.set('f');
         }}
          hoverStayTime={5}><Text className={styles.text} style={{ color: temp_unit_convert === 'f' ? 'red' : 'white' }}>℉</Text></View>
        <View className={styles.line}></View>
        <View hoverClassName={styles.pressed} onClick={() => { onClick() }}
          hoverStayTime={5}> 
          <Text className={styles.text} style={{ height: '110rpx' }} >取消</Text></View>
      </View>
    </View>
  );
}


export default BottomTureDialog;    